import Vue from "vue";
import VueRouter from "vue-router";

import Home from "@/pages/Home/Home.vue";
import Search from "@/pages/Search/Search.vue";
import Login from "@/pages/Login/Login.vue";
import Register from "@/pages/Reigster/Register.vue";

Vue.use(VueRouter)

// vue-router 编程式路由导航, 重写push, replace 方法
// ⭐️: 这里不能用 () => {}, 要获取VueRouter的实例this,
// 这里如果使用箭头函数, 词法作用域的this是undefined, 是错误的
const {push, replace} = VueRouter.prototype
VueRouter.prototype.push = function(to,
                                    onComplete = () => {},
                                    onAbort = () => {}) {
  push.call(this, to, onComplete, onAbort)
}

VueRouter.prototype.replace = function (to,
                                        onComplete = () => {},
                                        onAbort = () => {}) {
  replace.call(this, to, onComplete, onAbort)
}


export default new VueRouter({
  mode: 'hash',
  routes: [{
    name: 'login',
    path: '/login',
    component: Login,
    meta: {
      show: false
    }
  }, {
    name: 'register',
    path: '/register',
    component: Register,
    meta: {
      show: false
    }
  }, {
    name: 'home',
    path: '/home',
    component: Home,
    meta: {
      show: true
    }
  }, {
    name: 'search',
    path: '/search/:keyword?',
    component: Search,
    meta: {
      show: true
    },
    // 路由可以传递 props 参数, 三种写法
    // props: true
    // props: {a:1, b:2}
    // 使用最多
    props: $route => ({a: $route.params.keyword, b: $route.query.k, c: 200})
  }, {
    path: '*',
    redirect: '/home'
  }]
})